<!DOCTYPE html>
<html lang="zh" mode="light" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="meta">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <meta name="author" th:content="${#servletContext.getAttribute('configMap')['blog_author']}">
    <meta name="referrer" content="no-referrer" />
    [(${#servletContext.getAttribute('configMap')['meta_code']})]
    <meta name="keywords" th:content="${#servletContext.getAttribute('configMap')['keywords']}" />
    <meta name="description" th:content="${#servletContext.getAttribute('configMap')['description']}" />
    <meta property="og:description" th:content="${#servletContext.getAttribute('configMap')['description']}" />
</div>

<div th:fragment="link">
    <link rel="dns-prefetch" th:href="@{'//fonts.googleapis.com'}">
    <link rel="dns-prefetch" th:href="@{'//fonts.loli.net/css'}">
    <link rel="dns-prefetch" th:href="@{'//cdn.jsdelivr.net'}">
    <link rel="shortcut icon" th:href="@{${#servletContext.getAttribute('configMap')['favicon_url']}}"/>
<!--    <link th:href="@{'https://fonts.googleapis.com/css?family=Noto+Serif+SC:wght@400;500;700;900&display=swap'}" rel="stylesheet">-->
<!--    <link th:href="@{'https://fonts.loli.net/css?family=Poppins:400,500,600'}" rel="stylesheet">-->
<!--    <link th:href="@{'https://fonts.loli.net/css?family=Open+Sans:400,700&amp;subset=latin-ext'}" rel="stylesheet">-->
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/css/bootstrap/css/bootstrap.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/fonts/font-awesome/css/font-awesome.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/fonts/font-awesome/css/font-awesome-animation.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/css/animate.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/js/iziModal/css/iziModal.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/js/fancybox/jquery.fancybox.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/js/highlightjs/styles/atom-one-dark.min.css'}">
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/js/nprogress/nprogress.min.css'}">
    <link rel="stylesheet" th:href="@{${prefix} + '/source/css/app.css'}">
    <style th:if="${activeTheme.configMap['mourn'] == 'true'}">
        canvas,.header,.navBar,.pagination,.options,.option-item,
        .container,.post-detail,.sidebar-content,
        #nprogress .bar, #nprogress .spinner-icon,
        .scroll-line, .scroll-circle, .twikoo {
            filter: grayscale(1);
        }
        body::-webkit-scrollbar-thumb {
            background: #aaa;
        }
    </style>
</div>

<div th:fragment="nav">
    <div id="scroll-line" class="scroll-line"></div>
    <div class="scroll-circle">
        <div class="circle-left"><div class="left"></div></div>
        <div class="circle-right"><div class="right"></div></div>
        <span id="progress-value" class="progress-value"></span>
    </div>
    <div class="tiny-menu"></div>
    <div class="menu-toggle" id="menuToggle"><i class="fa fa-reorder "></i></div>
    <nav id="navBar" class="navBar">
        <div class="container">
            <ul class="menu">
                <li class="item title">
                    <span class="logo">
                        <a data-pjax th:href="@{'/'}">
                            <img th:src="@{${#strings.isEmpty(#servletContext.getAttribute('configMap')['logo_url']) != true ? #servletContext.getAttribute('configMap')['logo_url'] : prefix + '/source/images/logo.png'}}">
                        </a>
                    </span>
                    <span class="name">[[${#servletContext.getAttribute('configMap')['blog_name']}]]</span>
                </li>
                <li th:each="nav : ${#servletContext.getAttribute('firstNav')}" th:class="${currentNav.code eq nav.code ? 'item current' : 'item'}">
                    <a data-pjax th:href="@{${#lists.isEmpty(nav.children) ? nav.link : 'javascript:void(0)'}}" th:data-link="${nav.link}">
                        <i th:class="${nav.icon}"></i> [[${nav.name}]]
                        <span th:if="${#lists.isEmpty(nav.children) == false}">
                            <i class="fa fa-caret-down"></i>
                        </span>
                    </a>
                    <ul class="second-menu" th:if="${#lists.isEmpty(nav.children) == false}">
                        <li class="item" th:each="child : ${nav.children}">
                            <a data-pjax th:href="@{${child.link}}" th:data-link="${nav.link}"><i th:class="${child.icon}"></i> [[${child.name}]]</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="https://travellings.now.sh/" target="blank" title="开往-友链接力">✈️开往</a>
                </li>
            </ul>
            <ul class="tool pull-right">
                <li class="item"><a href="javascript:void(0)" id="searchBtn"> <i class="fa fa-search"></i></a></li>
                <li class="item"><a href="javascript:void(0)" id="modeBtn"> <i class="fa fa-moon-o"></i></a></li>
            </ul>
        </div>
    </nav>
</div>

<div th:fragment="footer">
    <footer class="footer">
        <div class="container">
            <div class="run-day">
                🕛 <span class="hidden-xs">小破站在各种灾难中</span>苟活了 <span id="runTime">1 天</span>
            </div>
            <div class="meta">
                🔥 <span id="busuanzi_container_site_pv"><span class="hidden-xs">总访问量:</span> <span id="busuanzi_value_site_pv">1</span>次</span> ·
                😃 <span id="busuanzi_container_site_uv"><span class="hidden-xs">总访问人数:</span> <span id="busuanzi_value_site_uv">1</span>人</span>
            </div>
            <div class="copyright">
                <i class="fa fa-cog  faa-spin animated"></i> <span th:utext="${#servletContext.getAttribute('configMap')['power_by']}"></span>
                • <a href="https://beian.miit.gov.cn/" target="_blank"><span th:utext="${#servletContext.getAttribute('configMap')['record']}"></span></a>
            </div>
        </div>
    </footer>
    <div id="aplayer" class="visible"></div>
</div>

<div th:fragment="comment">
    <div class="comment-panel">
        <p><i class="fa fa-comments"></i> 评论</p>
        <div id="tcomment"></div>
        <script th:src="@{${baseLink} + '/source/js/twikoo.all.min.js'}"></script>
        <script th:inline="javascript">
            twikoo.init({
                envId: [[${#servletContext.getAttribute('configMap')['twikoo_env_id']}]],
                el: '#tcomment',
                region: 'ap-shanghai',
                // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
            })
        </script>
    </div>
</div>

<div th:fragment="script">
    <script th:inline="javascript">
        let themeName = [[${activeTheme.name}]];
        let version = [[${activeTheme.configMap['version']}]];
        let baseLink = [[${baseLink}]];

        window.FPConfig = {
            delay: 0,
            ignoreKeywords: [],
            maxRPS: 3,
            hoverDelay: 50
        };
    </script>
    <script th:src="@{${baseLink} + '/source/js/plugins.js'}"></script>
    <script th:src="@{${baseLink} + '/source/css/bootstrap/js/bootstrap.min.js'}"></script>
    <script th:src="@{${baseLink} + '/source/js/layer/layer.js'}"></script>
    <script th:src="@{${baseLink} + '/source/js/clipboard.min.js'}"></script>
    <script th:src="@{${prefix} + '/source/js/app.js'}"></script>
    <script th:inline="javascript">
        let installTime = [[${#servletContext.getAttribute('configMap')['install_time']}]];
        let $runDay = $("#runTime");
        setInterval(function () {
            let date1 = installTime;
            let date2 = new Date();
            let date3 = date2.getTime() - new Date(date1).getTime();
            //计算出相差天数
            let days = Math.floor(date3/(24*3600*1000));
            //计算出小时数
            let leave1 = date3%(24*3600*1000);
            let hours = Math.floor(leave1/(3600*1000));
            //计算相差分钟数
            let leave2 = leave1%(3600*1000) ;
            let minutes = Math.floor(leave2/(60*1000));
            //计算相差秒数
            let leave3 = leave2%(60*1000);
            let seconds = Math.round(leave3/1000);
            $runDay.html(days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒");
        }, 1000);

        let clickEffect = [[${activeTheme.configMap['click']}]];
        if (clickEffect === "false") {
            $("canvas").remove();
        }
    </script>
    [(${#servletContext.getAttribute('configMap')['script_code']})]
</div>